<template>
	<transition name="slider"> 
			<music-list></music-list>
	</transition>
</template>

<script>
	import MusicList from '../music-list/music-list'
	import {mapGetters} from 'vuex'
	import {getSingerDetail} from 'api/singer'
	import {ERR_OK} from 'api/config'
	import {createSong} from 'common/js/song'
	export default {
		data(){
			return {
				songs:[]
			}
		},
		computed:{
			...mapGetters([
				'singer'
			])
		},
		created() {
			this._getDetail()
		},
		methods:{
			_getDetail(){
				if(!this.singer.id){
					this.$router.push('/singer')
					return
				}
				getSingerDetail(this.singer.id).then(res =>{
					if(res.code === ERR_OK){
						
						this.songs = this._normallizeSongs(res.data.list)
						console.log(this.songs)
					}
				})
			},
			_normallizeSongs(list){
				let ret = []
				list.forEach((item) => {
					let {musicData} = item
					if(musicData.songid && musicData.albummid){
						ret.push(createSong(musicData))
					}
				})
				return ret
			}
		},
		components:{
			MusicList
		}	
	} 
</script>

<style lang="stylus">
@import "~common/stylus/variable"
.singer-detail
	position:fixed
	z-index: 100
	top: 0
	left:0
	right:0
	bottom:0
	background: $color-background
.slider-enter-active, .slider-leave-active
		transition: all 0.3s
.slider-enter, .slider-leave-to
		transform: translate3d(100%,0,0)
</style>
